<template>
  <div>
    <div class="header">
      <div class="head_smallbox">
        <div>
          <div class="head_li" >
            <div class="mylogocon">
              <img src="../assets/lunbo/logo.png" class="mylogo">
            </div>
          </div>
          <div v-for="(item,index) in items" :key="index">
            <div class="head_li" @click="gothismoudule(index)">{{item.ctx}}</div>
          </div>
          <div class="head_li" :style="{width:'200px',marginLeft:'20px',marginTop:'12px'}">
            <div class="input-group">
              <span class="input-group-addon" id="basic-addon2" :style="{background:'#FFFFFF'}">
                <span class="glyphicon glyphicon-search" :style="{font:'#F5F5F5',opacity:'0.5'}"></span>
              </span>
              <input type="text" class="form-control" placeholder="请输入" aria-describedby="basic-addon2">
            </div>
          </div>
          <div class="head_li" @click="gores" :style="{float:'right'}">{{loginstore.ROrE}}</div>
          <div class="head_li" @click="gologin" :style="{float:'right'}">{{loginstore.lOrU}}</div>
          <div class="head_li" @click="goBuy" :style="{float:'right'}" v-if="Buybool">购物车</div>
        </div>
      </div>
    </div>
    <!--<nav>
      <el-menu class="el-menu-demo" mode="horizontal" background-color="#000000" text-color="#fff" active-text-color="#FFFFFF">
        <div class="mylogocon">
          <img src="../assets/lunbo/logo.png" class="mylogo">
        </div>
        <el-menu-item index="1" @click="gothismoudule">首页</el-menu-item>
        <el-menu-item index="2" @click="gothismoudule">店铺推荐</el-menu-item>
        <el-menu-item index="3" @click="gothismoudule">精致食谱</el-menu-item>
        <el-menu-item index="4" @click="gothismoudule">美食论坛</el-menu-item>
        <el-menu-item index="5" @click="gothismoudule">优质食材</el-menu-item>
        <el-menu-item index="6"  class="tabinputcon">
          <el-input placeholder="请输入内容"  prefix-icon="el-icon-search" class="tabinput"> </el-input>
        </el-menu-item>
        <el-menu-item index="8" :style="{float:rightmenu}" class="hoverstyle" @click="gothismoudule">注册</el-menu-item>
        &lt;!&ndash;<el-menu-item index="9" :style="{float:rightmenu}" @click="gothismoudule">{{loginmes}}</el-menu-item>&ndash;&gt;
        <el-menu-item index="7" :style="{float:rightmenu}" class="hoverstyle" :default-active="activeIndex2"  @select="handleSelect" @click="gothismoudule">
          <el-submenu index="2">
            <template slot="title">{{loginmes}}</template>
            <el-menu-item index="2-1" @click="gotomymessage"><i class="el-icon-location"></i>个人主页</el-menu-item>
            <el-menu-item index="2-2"><i class="el-icon-sold-out"></i>购物车</el-menu-item>
            <el-menu-item index="2-3"><i class="el-icon-bell"></i>消息提示</el-menu-item>
            <el-menu-item index="2-4"><i class="el-icon-circle-close-outline"></i>退出</el-menu-item>
          </el-submenu></el-menu-item>
      </el-menu>
    </nav>-->


  </div>
</template>

<script>
  export default {
    data() {
      return {
        rightmenu: 'right',
        activeIndex: '1',
        activeIndex2: '1',
        name:'',
        scrollTop: '',
        loadtime:10,
        items:[
          {ctx:'首頁'},
          {ctx:'店铺推荐'},
          {ctx:'精致食谱'},
          {ctx:'美食论坛'},
          {ctx:'优质食材'},
        ],
        num:0,
        loginstore:{
          lOrU:'登录',
          ROrE:'注册'
        },
        Buybool:false,
      }
    },
    computed:{
      loginmes(){
        return this.$store.state.loginmes;
      }
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      goBuy:function () {
        this.$router.push("/home/BuyCar");
      },
      gologin:function(){
        if(this.loginstore.lOrU=='登录'){
          this.$router.push("/home/frontlogin");
        }else{
          this.$router.push("/home/user");
        }
      },
      gores:function(){
        if(this.loginstore.ROrE=='注册') {
          this.$router.push("/home/frontres");
        }else{
          alert('已退出');
          let option={
            name:'',
            tel:'',
            age:'',
            sex:'',
            introduce:'',
            state:0
          }
          this.$store.state.loginmes=option;
          //console.log(this.$store.state.loginmes);
          this.loginstore={
            lOrU:'登录',
            ROrE:'注册'
          }
          this.Buybool=false;
          this.$router.push("/home");
        }
      },
      gothismoudule:function(index){
        //var el=event.currentTarget;//获取当前元素
        //var el=event;
        var self=this;
        this.num=index;
        var el=this.num;
        console.log(el);
        if(el==0){
          self.$router.push("/home");
        }
        if(el==1){
          self.$router.push("/home/foodrecommend");
        }
        if(el==2){
          self.$router.push("/home/cookbook");
        }
        if(el==3){
          self.$router.push("/home/foodBBS");
        }
        if(el==4){
          self.$router.push("/home/basefood");
        }
        if(el==5){
          self.$router.push("/home/frontres");
        }
        //console.log(this.$refs);
      },
    },
    mounted:function(){
      if(this.$store.state.loginmes.state==1){
      this.loginstore.ROrE='退出';
      this.loginstore.lOrU=this.$store.state.loginmes.name;
      this.Buybool=this.$store.state.loginmes.name
      }else{
        this.loginstore.lOrU='登录';
        this.loginstore.ROrE='注册';
      }
    },
  }
</script>
<style scoped>
  @import "../css/myhead.css";
</style>
<style scoped>
  .header{
    width: 100%;
    height: 60px;
    background-color: black;
  }
  .head_smallbox{
    width:100%;
    margin:0 auto;
    overflow:hidden;
    text-align: center;
  }
  .head_li{
    float: left;
    display: inline-block;
    width: 80px;
    line-height: 60px;
    font-size: 14px;
    color: white;
  }
  .head_li:hover{
    background: #0D0D0D;
    font-size: 20px;
    transition: 0.5s;
  }
</style>
